<template>
  <el-dialog
    v-loading="loading"
    title="分配角色"
    :visible="setRoleVisible"
    @close="closeDialog"
    @open="openDialog"
  >
    <el-checkbox-group v-model="checkList">
      <!-- 单个复选框绑定到是一个布尔值 -->
      <!-- 多个复选框 label 展示的数据 选中的值会被双向同步到 checkList 数组中-->
      <el-checkbox v-for="item in rolesList" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
    </el-checkbox-group>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="setRole">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { reqGetRolesList } from '@/api/settings'
import { reqGetUserDetailById } from '@/api/user'
import { reqUpdateUserRole } from '@/api/employees'
export default {
  props: {
    setRoleVisible: {
      type: Boolean,
      default: false
    },
    userId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      rolesList: [], // 所有角色列表
      checkList: [], // 选中角色的id列表
      loading: false
    }
  },
  created() {
    // this.getRolesList() 组件创建就直接获取了
  },
  methods: {
    // 通知父组件关闭对话框
    closeDialog() {
      this.$emit('update:setRoleVisible', false)
    },
    // 获取所有角列表的方法 - 正确的方法是让后台开获取所有角色列表接口
    async getRolesList() {
      const { data: { rows }} = await reqGetRolesList({ page: 1, pagesize: 99999 })
      this.rolesList = rows
      return rows
    },
    // 获取员工信息将roleIds数组赋值给复选框组双向绑定的checkList
    async getUserDetail() {
      // console.log(this.userId)
      const { data: { roleIds }} = await reqGetUserDetailById(this.userId)
      // console.log(roleIds)
      this.checkList = roleIds
      return roleIds
    },
    // 监听对话框的打开 ,再去获取所有角色列表和员工信息
    async openDialog() {
      this.loading = true
      // await this.getRolesList() // 假设 第一次请求花费了 10 s 请求回来数据
      // await this.getUserDetail() // 假设 第一次请求花费了 5 s 请求回来数据
      // this.loading = false // 如果使用以上方式loading 从true -> false经过15s时间的
      Promise.all([this.getRolesList(), this.getUserDetail()]).then(res => {
        // res就是多个promise返回的结果,会被收集好数组中
        // console.log(res)
        this.loading = false
      })
    },
    // 为用户分配角色
    async setRole() {
      await reqUpdateUserRole({ id: this.userId, roleIds: this.checkList })
      this.closeDialog()
    }
  }
  // 如果处理多个并发的请求,以最快的方式拿到结果 Promise.all([p1, p2, p3])
  // 如果处理多个并发的请求,拿到最快的一次请求结果 Promise.race([p1, p2, p3])
}
</script>

<style>

</style>
